<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css" type="text/css">
</head>
<body>
<div>
    <!-- 头部工具栏 -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-container layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delUsers">删除</button>
            </div>
            <form class="layui-form layui-input-inline">
                <div class="layui-input-inline">
                    <select id="select" name="type">
                        <option value="username" checked>学号(或工号)</option>
                        <option value="realname">姓名</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <input id="keyword" type="text" class="layui-input" placeholder="输入用户名" name="keyword">
                </div>
                <div class="layui-inline">
                    <button id="searchBtn" lay-filter="searchBtn" type="button" lay-event="search" lay-submit
                            class="layui-btn layui-btn-primary">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </script>

    <!-- 数据表格 -->
    <table id="users" class="layui-table" style="display: none" lay-filter="users"></table>

</div>

<!-- 隐藏表单，用于编辑动作 -->
<form class="layui-form" action="" lay-filter="editIfram" id="editIfram" style="display: none" method="post">
    <div class="layui-form-item" id="idBolck">
        <label class="layui-form-label">ID</label>
        <div class="layui-input-block">
            <input type="text" id="tempId" name="id" disabled class="layui-input" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" id="tempUsername" name="username" lay-verify="required" autocomplete="off"
                   class="layui-input" value="">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" id="tempRealname" name="realname" lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">系别</label>
        <div class="layui-input-block">
            <input type="text" id="tempDepartment" name="department" lay-verify="required" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">账号状态</label>
        <div class="layui-input-block">
            <input id="tempAccountNonExpired" type="checkbox" name="accountNonExpired" title="账号是否过期" lay-skin="primary"
                   value="true">
            <input id="tempAccountNonLocked" type="checkbox" name="accountNonLocked" title="账号是否锁定" lay-skin="primary"
                   value="true">
            <input id="tempCredentialsNonExpired" type="checkbox" name="credentialsNonExpired" title="证书是否过期"
                   lay-skin="primary" value="true">
            <input id="tempEnabled" type="checkbox" name="enabled" title="账号是否可用" lay-skin="primary" value="true">
        </div>
    </div>
    <!-- 隐藏提交按钮 -->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" lay-submit="" lay-filter="submitbtn" id="submitbtn" style="display: none">提交</button>
        </div>
    </div>
</form>

<!-- 模板 -->
<script type="text/html" id="checkboxTpl1" th:inline="none">
    {{#  if(d.accountNonExpired === true){ }}
    <span><input type="checkbox" name="accountNonExpired" lay-skin="primary" checked disabled></span>
    {{#  } else { }}
    <span><input type="checkbox" name="accountNonExpired" lay-skin="primary" disabled></span>
    {{#  } }}
</script>
<script type="text/html" id="checkboxTpl2" th:inline="none">
    {{#  if(d.accountNonLocked === true){ }}
    <span><input type="checkbox" name="accountNonLocked" lay-skin="primary" checked disabled></span>
    {{#  } else { }}
    <span><input type="checkbox" name="accountNonLocked" lay-skin="primary" disabled></span>
    {{#  } }}
</script>
<script type="text/html" id="checkboxTpl3" th:inline="none">
    {{#  if(d.credentialsNonExpired === true){ }}
    <span><input type="checkbox" name="credentialsNonExpired" lay-skin="primary" checked disabled></span>
    {{#  } else { }}
    <span><input type="checkbox" name="credentialsNonExpired" lay-skin="primary" disabled></span>
    {{#  } }}
</script>
<script type="text/html" id="checkboxTpl4" th:inline="none">
    {{#  if(d.enabled === true){ }}
    <span><input type="checkbox" name="enabled" lay-skin="primary" checked disabled></span>
    {{#  } else { }}
    <span><input type="checkbox" name="enabled" lay-skin="primary" disabled></span>
    {{#  } }}
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!-- 方法 -->
<script src="../webjars/jquery/3.4.1/jquery.js"></script>
<script src="../layui/layui.js" type="text/javascript"></script>
<script th:inline="none">

    function fillForm(data) {
        if (data == null) {
            $("#idBolck").css('display', 'none');
            $("#tempUsername").val('');
            $("#tempRealname").val('');
            $("#tempDepartment").val('');
            $("#tempMajor").val('');
            $("#tempAccountNonExpired").prop('checked', false);
            $("#tempAccountNonLocked").prop('checked', false);
            $("#tempCredentialsNonExpired").prop('checked', false);
            $("#tempEnabled").prop('checked', false);
        } else {
            $("#idBolck").css('display', 'block');
            $("#tempId").val(data.id);
            $("#tempUsername").val(data.username);
            $("#tempRealname").val(data.realname);
            $("#tempDepartment").val(data.department);
            $("#tempMajor").val(data.major);
            (data.accountNonExpired === true) ? $("#tempAccountNonExpired").prop('checked', true) : $("#tempAccountNonExpired").prop('checked', false);
            (data.accountNonLocked === true) ? $("#tempAccountNonLocked").prop('checked', true) : $("#tempAccountNonLocked").prop('checked', false);
            (data.credentialsNonExpired === true) ? $("#tempCredentialsNonExpired").prop('checked', true) : $("#tempCredentialsNonExpired").prop('checked', false);
            (data.enabled === true) ? $("#tempEnabled").prop('checked', true) : $("#tempEnabled").prop('checked', false);
        }
    }

    layui.use(['form', 'table', 'element', 'laytpl'], function () {
        var form = layui.form
            , element = layui.element
            , laytpl = layui.laytpl
            , table = layui.table;

        //layui数据表格
        table.render({
            elem: '#users'
            , url: '/admin/users'
            , limit: 30
            , height: 'full-90'
            , page: {
                layout: ['prev', 'page', 'next', 'skip', 'count']
                , groups: 5
            }
            , toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', hide:true}
                , {field: 'username', title: '账号', width: 110, sort: true}
                , {field: 'realname', title: '姓名', width: 90}
                , {field: 'department', title: '系别', sort: true}
                , {field: 'major', title: '专业'}
                , {field: 'createTime', title: '创建时间', sort: true}
                , {field: 'lastLoginTime', title: '登录时间', sort: true}
                , {field: 'accountNonExpired', title: '是否过期',unresize: true, width: 100, templet: '#checkboxTpl1'}
                , {field: 'accountNonLocked', title: '是否锁定',unresize: true, width: 100, templet: '#checkboxTpl2'}
                , {field: 'credentialsNonExpired', title: '证书是否过期',unresize: true, width: 120, templet: '#checkboxTpl3'}
                , {field: 'enabled', title: '是否可用',unresize: true, width: 100, templet: '#checkboxTpl4'}
                , {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(users)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch (obj.event) {
                case 'search':
                    //执行重载
                    table.reload('users', {
                        url:'/admin/search/'+$('#select').val()+'/'+$('#keyword').val()
                    });
                    break;
                case 'delUsers':
                    var data = checkStatus.data;  //获取选中行数据
                    layer.alert(JSON.stringify(data), {
                        title: '确认删除？',
                        offset: ['50px', '200px'],
                        area: ['50%', '70%']
                    }, function () {
                        layer.confirm('确定删除吗？', function () {
                            //表单提交
                            $.ajax({
                                url: '/admin/deleteUsers',
                                data: JSON.stringify(data),
                                dataType: 'json',
                                headers: {
                                    'Content-Type': 'application/json;charset=utf-8'
                                },
                                type: 'post',
                                success: function (result) {
                                    layer.alert("成功" + result, function () {
                                        layer.closeAll();
                                    })
                                }
                            })
                        })
                    });
                    break;
            }
        });

        //监听工具条
        table.on('tool(users)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    //表单提交
                    $.ajax({
                        url: '/admin/deleteUsers',
                        data: JSON.stringify(data),
                        dataType: 'json',
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        type: 'post',
                        success: function (result) {
                            layer.alert("成功" + result, function () {
                                layer.closeAll();
                            })
                        }
                    })
                });

            } else if (obj.event === 'edit') {
                fillForm(data);
                //因为是动态插入表单，官方解释说要重新渲染
                form.render();
                layer.open({
                    type: 1,
                    title: '编辑教师信息',
                    shade: 0.4,
                    content: $("#editIfram"),
                    resize: false,
                    offset: ['50px', '200px'],
                    area: ['50%', '70%'],
                    btn: ['提交', '取消'],
                    maxmin: true, //开启最大化最小化按钮
                    scrollbar: true,//屏蔽浏览器滚动条
                    yes: function (index, layero) {
                        //监听submit按钮提交
                        form.on('submit(submitbtn)', function (data) {
                            //确认表单信息
                            layer.alert(JSON.stringify(data.field), {
                                title: '最终的提交信息'
                            }, function () {
                                //表单提交
                                $.ajax({
                                    url: '/admin/updateUsers',
                                    data: JSON.stringify(data.field),
                                    dataType: 'json',
                                    headers: {
                                        'Content-Type': 'application/json;charset=utf-8'
                                    },
                                    type: 'post',
                                    success: function (result) {
                                        layer.alert("成功" + result, function () {
                                            layer.closeAll();
                                        })
                                    }
                                })
                            });
                            return false;
                        });
                        //防止表单验证失效
                        $("#submitbtn").trigger('click');
                    },
                    end: function () {
                        $("#editIfram").css("display", "none");
                    }
                });
            }
        });

    });
</script>
</body>
</html>